<script lang="ts" setup>
import { ref } from 'vue';

import { useLoading } from '@vben-core/shadcn-ui';

import { Button } from 'ant-design-vue';

const wrapEl = ref();
const spinning = ref(false);
const [openFullLoading, closeFullLoading] = useLoading({
  target: wrapEl,
  props: {
    text: '加载中...',
    absolute: true,
  },
});
// const [openFullLoading, closeFullLoading] = useLoading({
//   text: '加载中...',
// });

function handleBtn() {
  openFullLoading();
  // spinning.value = true;
}

function handleClose() {
  closeFullLoading();
  spinning.value = false;
}
</script>

<template>
  <div style="width: 800px; height: 500px; background-color: bisque">
    <div
      style="width: 300px; height: 300px; background-color: red"
      ref="wrapEl"
    >
      div
    </div>
    <Button @click="handleBtn">开启加载</Button>
    <Button @click="handleClose">关闭</Button>
  </div>
</template>
